<template>
  <div class="MyDay11">
    <h1>我是第一个子组件</h1>
    <h2>{{ this.$store.state.sum }}</h2>
    <h2>{{ $store.state.sum }}</h2>
    <button @click="addBtn(1)">通过mutations中funAdd触发+1的函数</button>
    <button @click="addsBtn(5)">通过actions中setFun触发+5的函数</button>
    <h2>{{ this.$store.getters.bigNum }}</h2>
    <hr>
    <h2>{{ this.$store.state.stor1.userName }}</h2>
    <!-- vueTify适用于做网页 -->
    <hr>
    <el-table
      :data="tableData"
      style="width: 100%">
      <el-table-column
        prop="date"
        label="日期"
        width="180">
      </el-table-column>
      <el-table-column
        prop="name"
        label="姓名"
        width="180">
      </el-table-column>
      <el-table-column
        prop="address"
        label="地址">
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
    name:"MyDay11",
    data() {
        return {
          tableData: [{
            date: '2016-05-02',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1518 弄'
          }, {
            date: '2016-05-04',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1517 弄'
          }, {
            date: '2016-05-01',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1519 弄'
          }, {
            date: '2016-05-03',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1516 弄'
          }]
        }
    },
    created(){
        console.log(this.$store);
    },
    methods:{
      // 加1的方法
      addBtn(user){
        this.$store.commit("funAdd",user)
      },
      addsBtn(user){
        this.$store.dispatch("setFun",user)
      }
    },
    computed:{

    }
}
</script>

<style scoped>
.MyDay11 {
    border: 5px solid pink;
    height: 500px;
}
</style>